<template>
	<view class="tui-tabbar footbar-bg">
		<block v-for="(item,index) in tabbar" :key="index">
			<view class="tui-tabbar-item" :class="[currentNum==index?'tui-item-active':'']" @tap="tabbarSwitch(index)">
				<view class="tui-icon-box">
					<view class="foot-iconfont" :class="[item.icon,skinStyle=='skinStyle1'?'iconfont':'t-icon']"></view>
					<view class="tui-badge tui-badge-red" v-if="index===2&&carCount!==0">{{carCount}}</view>
				</view>
				<view class="tui-scale" :class="index===2?'margin-l':''">{{item.text}}</view>
			</view>
		</block>
	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		name:'footBar',
		// components: {
		// 	tuiIcon,
		// },
		props:{
			current:{
				type:Number,
				default:0,
			},
			skinStyle:{
				type:String,
				default:'skinStyle1'
			}
		},
		data(){
			return{
				currentNum:this.current,
				userLoginClick: false,
			}
		},
		mounted() {
			// if(this.userType == 1) {
			// 	const obj = {icon: 'iconqianbao2',text: "会员钱包"};
			// 	this.tabbar.splice(4,1,obj);
			// }
		},
		onLoad() {
		},
		computed:{
			...mapState(['nickName', 'carCount', 'tabbar']),
		},
		watch:{
			current(newVal){
				this.currentNum=newVal;
				console.log(this.currentNum);
			},
			skinStyle(newVal){
				if(newVal==='skinStyle1'){
					this.tabbar[0].icon='iconshouyehome';
					this.tabbar[1].icon='icon2';
					this.tabbar[2].icon='icongouwuche';
					this.tabbar[3].icon='iconwode';
				}else if(newVal==='skinStyle2'){
					this.tabbar[0].icon='iconyepian';
					this.tabbar[1].icon='iconyepian1';
					this.tabbar[2].icon='iconyepian2';
					this.tabbar[3].icon='iconyepian3';
					
				}else if(newVal==='skinStyle3'){
					this.tabbar[0].icon='iconlvzhi6';
					this.tabbar[1].icon='iconlvzhi3';
					this.tabbar[2].icon='iconlvzhi4';
					this.tabbar[3].icon='iconlvzhi1';
				}else if(newVal==='skinStyle4'){
					this.tabbar[0].icon='iconxifaru';
					this.tabbar[1].icon='iconfenshua';
					this.tabbar[2].icon='iconkouhong';
					this.tabbar[3].icon='iconfenbing';
				}else if(newVal==='skinStyle5'){
					this.tabbar[0].icon='icon09';
					this.tabbar[1].icon='icon38';
					this.tabbar[2].icon='icon37';
					this.tabbar[3].icon='icon39';
				}else if(newVal==='skinStyle6'){
					this.tabbar[0].icon='iconshy';
					this.tabbar[1].icon='iconcool';
					this.tabbar[2].icon='iconjoking';
					this.tabbar[3].icon='iconpirate';
				}
			}
		},
		methods:{
			...mapMutations(['setNickName', 'setHeadimgurl']),
			tabbarSwitch: function(index) {
				//获取加载的页面
				const pages = getCurrentPages();
				//获取当前页面的对象
				const currentPage = pages[pages.length - 1];
				//当前页面url
				const url = currentPage.route;
				const old = this.currentNum;
				this.currentNum =index;
				if (index == 0) {
					if(url != 'pages/home/home') {
						uni.reLaunch({
							url: '../home/home?reload=true'
						})
					}
				}else if (index == 1) {
					uni.reLaunch({
						url: '../category/category'
					})
				} 
				else if (index == 2) {
					uni.reLaunch({
						url: '../shopcart/shopcart'
					})
				} else if (index == 3) {
					// #ifdef MP-WEIXIN
					if (this.nickName) {
						uni.reLaunch({
							url: '../my/my'
						})	
					} else {
						if (this.userLoginClick) {
							return
						}
						this.userLoginClick = true;
						wx.getUserProfile({
						  desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
						  success: (info) => {
								this.userLoginClick = false;
								const params = {
									nickName: info.userInfo.nickName,
									avatarUrl: info.userInfo.avatarUrl
								};
								this.$http.updateAuthorization(params).then(res => {
									if (res.status == 0) {
										this.setNickName(info.userInfo.nickName);
										this.setHeadimgurl(info.userInfo.avatarUrl);
										uni.reLaunch({
											url: '../my/my'
										})	
									}
								})
						  },
						  fail: (res) => {
						  	this.userLoginClick = false;
							this.currentNum =old;
						  }
						})
					}
					// #endif
					// #ifndef MP-WEIXIN
					uni.reLaunch({
						url: '../my/my'
					})
					// #endif
				} else if (index == 4) {
					uni.reLaunch({
						url: '../wallet/wallet'
					})
				}
			},
		}
	}
</script>
<style lang="scss">
	.tui-icon-box {
		position: relative;
	}
	.tui-tabbar-item {
		flex: 1;
		width: 25%;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: space-between;
		font-size: 26rpx;
		color: #666;
		height: 76rpx;
		margin:12rpx 0;
	}
	.foot-iconfont{
		font-size: 40rpx;
	}
	.tui-scale {
		font-size: 22rpx;
		margin-top: -6rpx;
	}
	.margin-l{
		margin-left:6rpx;
	}
	.t-icon{
		width: 50rpx;
		height: 50rpx;
	}
</style>